<template>
   <div>
      <div style="display: flex; justify-content: space-between">
         <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-top: 12px; margin-left: 26px"
         >
            <el-breadcrumb-item>
               <span style="color: #409eff; font-size: 15px">学生数据信息</span>
            </el-breadcrumb-item>
         </el-breadcrumb>

         <div>
            <el-button
               style="width: 140px; line-height: 50px; margin-right: 15px"
               @click="uploadFileDialogShow = true"
               v-if="currentPagePermissionStatusByCurrentUser.addStudent"
            >
               <el-icon style="margin-right: 4px; vertical-align: middle">
                  <Document />
               </el-icon>
               导入学生
            </el-button>

            <el-button
               style="width: 140px; line-height: 50px; margin-right: 15px"
               @click="createStudentDialogShow = true"
               v-if="currentPagePermissionStatusByCurrentUser.addStudent"
            >
               <el-icon style="margin-right: 4px; vertical-align: middle">
                  <CirclePlus />
               </el-icon>
               新增学生
            </el-button>

            <el-button
               style="width: 140px; line-height: 50px; margin-right: 15px"
               @click="exportFileDialogShow = true"
               v-if="currentPagePermissionStatusByCurrentUser.exportStudentFile"
            >
               <el-icon style="margin-right: 4px; vertical-align: middle">
                  <Crop />
               </el-icon>
               导出学生
            </el-button>
         </div>
      </div>

      <div class="search_container">
         <div class="search_container_item">
            <div style="display: flex; flex: 2; margin-right: 20px">
               <span>姓名</span>
               <el-input
                  v-model="searchCondition.name"
                  class="search_input"
                  placeholder="要查询的姓名"
               />
            </div>
            <div style="display: flex; flex: 3; margin-right: 20px">
               <span style="flex: 1">学号</span>
               <el-input
                  v-model="searchCondition.stuId"
                  style="flex: 2"
                  class="search_input"
                  placeholder="要查询的学号"
               />
            </div>
            <div style="display: flex; flex: 3; margin-right: 20px">
               <span style="flex: 1">专业</span>

               <el-select
                  v-model="searchCondition.major"
                  placeholder="要查询的专业"
                  style="flex: 2; height: 28px"
               >
                  <el-option
                     v-for="major in majorList"
                     :key="major"
                     :label="major"
                     :value="major"
                  ></el-option>
               </el-select>
            </div>
            <div style="display: flex; flex: 3">
               <span style="flex: 1">班级</span>
               <el-input
                  v-model="searchCondition.classN"
                  style="flex: 2"
                  class="search_input"
                  placeholder="要查询学生的班级"
               />
            </div>
            <div style="display: flex; flex: 3">
               <span style="flex: 1">省份</span>
               <el-input
                  v-model="searchCondition.province"
                  style="flex: 2"
                  class="search_input"
                  placeholder="要查询学生的省份"
               />
            </div>
            <div style="display: flex; flex: 3">
               <span style="flex: 1">年级</span>
               <el-input
                  v-model="searchCondition.enrollYear"
                  style="flex: 2"
                  class="search_input"
                  placeholder="填写纯数字，例：2020"
               />
            </div>
         </div>
         <el-divider style="margin: 13px 0"></el-divider>
         <div class="search_container_button">
            <el-button
               style="width: 80px; height: 30px; margin-right: 30px"
               type="primary"
               @click="getStudentListPage(1)"
               >查询</el-button
            >
            <el-button
               style="width: 80px; height: 30px"
               type="info"
               @click="resetSearch()"
               >重置</el-button
            >
         </div>
      </div>

      <!-- 学生列表 -->
      <div>
         <el-table
            style="border-radius: 10px"
            :data="studentPageInfo.studentList"
            stripe
            :header-cell-style="{ height: '60px', fontSize: '16px' }"
            :cell-style="{ height: '60px', fontSize: '14px' }"
            :default-expand-all="false"
         >
            <el-table-column
               prop="num"
               label="序号"
               header-align="center"
               min-width="75"
               align="center"
            ></el-table-column>
            <el-table-column
               prop="name"
               label="姓名"
               header-align="center"
               min-width="75"
               align="center"
            ></el-table-column>
            <el-table-column
               prop="stuId"
               label="学号"
               header-align="center"
               min-width="75"
               align="center"
            ></el-table-column>
            <el-table-column
               prop="classN"
               label="班级"
               header-align="center"
               min-width="75"
               align="center"
            ></el-table-column>
            <el-table-column
               prop="grade"
               label="年级"
               header-align="center"
               min-width="75"
               align="center"
            ></el-table-column>
            <el-table-column
               prop="totalPoints"
               label="总分"
               header-align="center"
               min-width="75"
               align="center"
            ></el-table-column>
            <el-table-column
               prop="originArea"
               label="生源地"
               header-align="center"
               min-width="75"
               align="center"
            ></el-table-column>
            <el-table-column
               prop="major"
               label="录取专业"
               header-align="center"
               min-width="75"
               align="center"
            ></el-table-column>
            <el-table-column
               label="操作"
               width="240px"
               header-align="center"
               min-width="100"
               align="center"
            >
               <template v-slot="scope">
                  <el-tooltip
                     effect="dark"
                     placement="top-start"
                     content="编辑学生信息"
                     v-if="
                        currentPagePermissionStatusByCurrentUser.operateStudentList
                     "
                  >
                     <el-icon
                        @click="editStudentInfoIcon(scope.row)"
                        style="
                           font-size: 21px;
                           color: #5a9cf8;
                           margin-right: 10px;
                           cursor: pointer;
                        "
                     >
                        <Edit />
                     </el-icon>
                  </el-tooltip>
                  <el-tooltip
                     effect="dark"
                     content="详细信息"
                     placement="top-start"
                  >
                     <el-icon
                        @click="showStudentDetail(scope.row)"
                        style="
                           font-size: 21px;
                           color: #5a9cf8;

                           cursor: pointer;
                        "
                        ><More
                     /></el-icon>
                  </el-tooltip>
                  <el-tooltip
                     effect="dark"
                     content="删除此学生"
                     placement="top-start"
                     v-if="
                        currentPagePermissionStatusByCurrentUser.operateStudentList
                     "
                  >
                     <el-icon
                        @click="deleteStudent(scope.row)"
                        style="
                           font-size: 21px;
                           margin-left: 10px;
                           color: #5a9cf8;
                           cursor: pointer;
                        "
                        ><CircleClose
                     /></el-icon>
                  </el-tooltip>
               </template>
            </el-table-column>
         </el-table>

         <!-- 分页 -->
         <div style="display: inline-block; margin: 30px 0; text-align: center">
            <el-pagination
               @current-change="getStudentListPage"
               :current-page="studentPageInfo.currentPage"
               :page-sizes="[5, 10, 20, 30, 40]"
               @size-change="pageSizeChange"
               :page-size="studentPageInfo.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="studentPageInfo.totalItemsNum"
            >
            </el-pagination>
         </div>
      </div>

      <!-- 新增学生 -->
      <el-dialog
         v-model="createStudentDialogShow"
         width="1000px"
         :show-close="false"
         style="border-radius: 4px"
      >
         <template #header>
            <span style="font-size: 20px; font-weight: 400; margin: 0"
               >新增学生</span
            >
         </template>

         <el-form
            :model="createStudentForm"
            :rules="createStudentRules"
            ref="createStudentFormDom"
         >
            <el-row>
               <el-col :span="12">
                  <el-form-item
                     label="学生姓名："
                     prop="name"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.name"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="学生学号："
                     prop="stuId"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.stuId"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="学生班级："
                     prop="classN"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.classN"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="学生总分："
                     prop="totalPoints"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.totalPoints"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="生源地："
                     prop="originArea"
                     style="margin-left: 24px"
                  >
                     <el-input
                        v-model="createStudentForm.originArea"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="录取专业："
                     prop="major"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.major"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="性别："
                     prop="sex"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="createStudentForm.sex"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="年级："
                     prop="grade"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="createStudentForm.grade"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="学院："
                     prop="college"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="createStudentForm.college"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="12">
                  <el-form-item
                     label="批次："
                     prop="batch"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="createStudentForm.batch"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="联系电话："
                     prop="telephone"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.telephone"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="招生中学："
                     prop="middleSchool"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.middleSchool"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="第一志愿："
                     prop="firstChoice"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.firstChoice"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="第二志愿："
                     prop="secondChoice"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.secondChoice"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="第三志愿："
                     prop="thirdChoice"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.thirdChoice"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="第四志愿："
                     prop="fourthChoice"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.fourthChoice"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="第五志愿："
                     prop="fifthChoice"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentForm.fifthChoice"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item label="附加信息：" style="margin-left: 10px">
                     <el-button
                        style="width: 80%"
                        @click="createStudentMoreInfoDialogShow = true"
                        >点击填写学生附加信息</el-button
                     >
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>

         <template #footer>
            <span class="dialog-footer">
               <el-button @click="createStudentDialogShow = false"
                  >取 消</el-button
               >
               <el-button type="primary" @click="createStudent()"
                  >添 加</el-button
               >
            </span>
         </template>
      </el-dialog>

      <!-- 新增学生，学生更多信息填写窗口 -->
      <el-dialog
         v-model="createStudentMoreInfoDialogShow"
         width="1000px"
         style="border-radius: 4px"
         draggable
      >
         <template #header>
            <span style="font-size: 20px; font-weight: 400; margin: 0"
               >学生更多信息</span
            >
         </template>

         <el-form :model="createStudentMoreInfoForm">
            <el-row>
               <el-col :span="12">
                  <el-form-item
                     label="出生日期："
                     prop="birthday"
                     style="margin-left: 10px"
                  >
                     <el-date-picker
                        v-model="createStudentMoreInfoForm.birthday"
                        style="width: 80%"
                     ></el-date-picker>
                  </el-form-item>

                  <el-form-item
                     label="民族："
                     prop="ethnic"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.ethnic"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="政治面貌："
                     prop="political"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.political"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="身份证件号："
                     prop="tidNumber"
                     style="margin-left: -4px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.idNumber"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="身份证类型："
                     prop="idType"
                     style="margin-left: -4px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.idType"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="出生地："
                     prop="birthplace"
                     style="margin-left: 24px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.birthplace"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="籍贯："
                     prop="nativePlace"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.nativePlace"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="国家："
                     prop="country"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.country"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="12">
                  <el-form-item
                     label="入学年月："
                     prop="enrollmentDate"
                     style="margin-left: 10px"
                  >
                     <el-date-picker
                        v-model="createStudentMoreInfoForm.enrollmentDate"
                        style="width: 80%"
                     ></el-date-picker>
                  </el-form-item>
                  <el-form-item
                     label="培养方式："
                     prop="trainingMode"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.trainingMode"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="学制："
                     prop="academicYear"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.academicYear"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="外语语种："
                     prop="foreignLang"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.foreignLang"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="语文成绩："
                     prop="chineseScore"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.chineseScore"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="数学成绩："
                     prop="mathScore"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.mathScore"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="外语成绩："
                     prop="foreignScore"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.foreignScore"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="综合成绩："
                     prop="comprehensiveScore"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="createStudentMoreInfoForm.comprehensiveScore"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>

         <template #footer>
            <span class="dialog-footer">
               <el-button @click="resetStudentMoreInfoForm()">重 置</el-button>
               <el-button @click="createStudentMoreInfoDialogShow = false"
                  >取 消</el-button
               >
               <el-button
                  type="primary"
                  @click="createStudentMoreInfoDialogShow = false"
                  >保 存</el-button
               >
            </span>
         </template>
      </el-dialog>

      <!-- 学生详情 -->
      <el-dialog
         title="学生详情"
         v-model="detailStudentDialogShow"
         width="800px"
      >
         <template #header>
            <span style="font-size: 18px"
               >{{ currentDetailStudent.name }}-详情信息</span
            >
         </template>

         <el-descriptions :column="2" border>
            <el-descriptions-item>
               <template #label> 姓名： </template>
               {{ currentDetailStudent.name }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 学号： </template>
               {{ currentDetailStudent.stuId }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 班级： </template>
               {{ currentDetailStudent.classN }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 总分： </template>
               {{ currentDetailStudent.totalPoints }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 生源地： </template>
               {{ currentDetailStudent.originArea }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 录取专业： </template>
               {{ currentDetailStudent.major }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 性别： </template>
               {{ currentDetailStudent.sex.toString() === "1" ? "男" : "女" }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 年级： </template>
               {{ currentDetailStudent.grade }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 学院： </template>
               {{ currentDetailStudent.college }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 联系电话： </template>
               {{ currentDetailStudent.telephone }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 联系电话： </template>
               {{ currentDetailStudent.telephone }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 批次： </template>
               {{ currentDetailStudent.batch }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 招生中学： </template>
               {{ currentDetailStudent.middleSchool }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 第一志愿： </template>
               {{ currentDetailStudent.firstChoice }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 第二志愿： </template>
               {{ currentDetailStudent.secondChoice }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 第三志愿： </template>
               {{ currentDetailStudent.thirdChoice }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 第四志愿： </template>
               {{ currentDetailStudent.fourthChoice }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 第五志愿： </template>
               {{ currentDetailStudent.fifthChoice }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 出生日期： </template>
               {{ currentDetailStudent.birthday }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 民族： </template>
               {{ currentDetailStudent.ethnic }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 政治面貌： </template>
               {{ currentDetailStudent.political }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 身份证号： </template>
               {{ currentDetailStudent.idNumber }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 身份证类型： </template>
               {{ currentDetailStudent.idType }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 出生地： </template>
               {{ currentDetailStudent.birthplace }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 籍贯： </template>
               {{ currentDetailStudent.nativePlace }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 国家： </template>
               {{ currentDetailStudent.country }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 入学年月： </template>
               {{ currentDetailStudent.enrollmentDate }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 培养方式： </template>
               {{ currentDetailStudent.trainingMode }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 学制： </template>
               {{ currentDetailStudent.academicYear }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 外语语种： </template>
               {{ currentDetailStudent.foreignLang }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 语文成绩： </template>
               {{ currentDetailStudent.chineseScore }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 数学成绩： </template>
               {{ currentDetailStudent.mathScore }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 外语成绩： </template>
               {{ currentDetailStudent.foreignScore }}
            </el-descriptions-item>

            <el-descriptions-item>
               <template #label> 综合成绩： </template>
               {{ currentDetailStudent.comprehensiveScore }}
            </el-descriptions-item>
         </el-descriptions>
      </el-dialog>

      <!-- 编辑学生 -->
      <el-dialog
         v-model="editStudentDialogShow"
         width="1000px"
         :show-close="false"
         style="border-radius: 4px"
      >
         <template #header>
            <span style="font-size: 20px; font-weight: 400; margin: 0"
               >编辑学生</span
            >
         </template>

         <el-form
            :model="editStudentForm"
            :rules="createStudentRules"
            ref="editStudentFormDom"
         >
            <el-row>
               <el-col :span="12">
                  <el-form-item
                     label="学生姓名："
                     prop="name"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.name"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="学生学号："
                     prop="stuId"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.stuId"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="学生班级："
                     prop="classN"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.classN"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="学生总分："
                     prop="totalPoints"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.totalPoints"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="生源地："
                     prop="originArea"
                     style="margin-left: 24px"
                  >
                     <el-input
                        v-model="editStudentForm.originArea"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="录取专业："
                     prop="major"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.major"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="性别："
                     prop="sex"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="editStudentForm.sex"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="年级："
                     prop="grade"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="editStudentForm.grade"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="学院："
                     prop="college"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="editStudentForm.college"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="12">
                  <el-form-item
                     label="批次："
                     prop="batch"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="editStudentForm.batch"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="联系电话："
                     prop="telephone"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.telephone"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="招生中学："
                     prop="middleSchool"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.middleSchool"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="第一志愿："
                     prop="firstChoice"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.firstChoice"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="第二志愿："
                     prop="secondChoice"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.secondChoice"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="第三志愿："
                     prop="thirdChoice"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.thirdChoice"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="第四志愿："
                     prop="fourthChoice"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.fourthChoice"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="第五志愿："
                     prop="fifthChoice"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentForm.fifthChoice"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item label="附加信息：" style="margin-left: 10px">
                     <el-button
                        style="width: 80%"
                        @click="editStudentMoreInfoDialogShow = true"
                        >点击编辑学生附加信息</el-button
                     >
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>

         <template #footer>
            <span class="dialog-footer">
               <el-button @click="editStudentDialogShow = false"
                  >取 消</el-button
               >
               <el-button type="primary" @click="confimEditStudent()"
                  >修 改</el-button
               >
            </span>
         </template>
      </el-dialog>

      <!-- 编辑学生，学生更多信息填写窗口 -->
      <el-dialog
         v-model="editStudentMoreInfoDialogShow"
         width="1000px"
         style="border-radius: 4px"
         draggable
      >
         <template #header>
            <span style="font-size: 20px; font-weight: 400; margin: 0"
               >学生更多信息</span
            >
         </template>

         <el-form :model="editStudentMoreInfoForm">
            <el-row>
               <el-col :span="12">
                  <el-form-item
                     label="出生日期："
                     prop="birthday"
                     style="margin-left: 10px"
                  >
                     <el-date-picker
                        v-model="editStudentMoreInfoForm.birthday"
                        style="width: 80%"
                     ></el-date-picker>
                  </el-form-item>

                  <el-form-item
                     label="民族："
                     prop="ethnic"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.ethnic"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="政治面貌："
                     prop="political"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.political"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="身份证件号："
                     prop="tidNumber"
                     style="margin-left: -4px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.idNumber"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="身份证类型："
                     prop="idType"
                     style="margin-left: -4px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.idType"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="出生地："
                     prop="birthplace"
                     style="margin-left: 24px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.birthplace"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="籍贯："
                     prop="nativePlace"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.nativePlace"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="国家："
                     prop="country"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.country"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
               </el-col>

               <el-col :span="12">
                  <el-form-item
                     label="入学年月："
                     prop="enrollmentDate"
                     style="margin-left: 10px"
                  >
                     <el-date-picker
                        v-model="editStudentMoreInfoForm.enrollmentDate"
                        style="width: 80%"
                     ></el-date-picker>
                  </el-form-item>
                  <el-form-item
                     label="培养方式："
                     prop="trainingMode"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.trainingMode"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>

                  <el-form-item
                     label="学制："
                     prop="academicYear"
                     style="margin-left: 38px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.academicYear"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="外语语种："
                     prop="foreignLang"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.foreignLang"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="语文成绩："
                     prop="chineseScore"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.chineseScore"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="数学成绩："
                     prop="mathScore"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.mathScore"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="外语成绩："
                     prop="foreignScore"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.foreignScore"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
                  <el-form-item
                     label="综合成绩："
                     prop="comprehensiveScore"
                     style="margin-left: 10px"
                  >
                     <el-input
                        v-model="editStudentMoreInfoForm.comprehensiveScore"
                        style="width: 80%"
                     ></el-input>
                  </el-form-item>
               </el-col>
            </el-row>
         </el-form>

         <template #footer>
            <span class="dialog-footer">
               <el-button @click="editStudentMoreInfoDialogShow = false"
                  >取 消</el-button
               >
               <el-button
                  type="primary"
                  @click="editStudentMoreInfoDialogShow = false"
                  >保 存</el-button
               >
            </span>
         </template>
      </el-dialog>

      <!-- 上传文件 -->
      <el-dialog v-model="uploadFileDialogShow" style="border-radius: 4px">
         <template #header>
            <a
               href="#"
               style="
                  font-size: 15px;
                  font-weight: 400;
                  margin-right: 40px;
                  margin-top: 1px;
                  float: right;
                  color: #5a9cf8;
               "
               @click.prevent="downloadFile()"
               >下载模版</a
            >
         </template>

         <el-upload
            class="upload-demo"
            drag
            action="string"
            :limit="1"
            accept=".xlsx"
            ref="uploadDOM"
            :http-request="httpRequest"
         >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
               拖动文件到此处或<em>点击这里</em>上传
            </div>
            <template #tip>
               <div class="el-upload__tip">
                  仅支持XLSX格式的文件，大小小于500kb
               </div>
            </template>
         </el-upload>  
         
         <el-button
            :disabled="isLoading"
            type="success"
            @click="handleSubmitUpload()"
         >
            确认上传
         </el-button>

         <el-table
            v-show="loadErrorRow.length > 0"
            :data="loadErrorRow"
            stripe
            :header-cell-style="{ height: '30px', fontSize: '16px' }"
            :cell-style="{ height: '30px', fontSize: '14px' }"
            :default-expand-all="false"
         >
            <el-table-column
               prop="row"
               label="行数"
               header-align="center"
               align="center"
            ></el-table-column>
            <el-table-column
               prop="errMessage"
               label="错误信息"
               header-align="center"
               align="center"
            ></el-table-column>
         </el-table>
      </el-dialog>

      <!-- 导出文件 -->
      <el-dialog
         v-model="exportFileDialogShow"
         style="border-radius: 4px"
         width="1000px"
      >
         <span
            style="
               margin-top: -20px;
               font-size: 19px;
               font-weight: 600;
               display: block;
            "
            >导出条件选择</span
         >

         <div
            class="search_container"
            style="margin: 0; background-color: transparent; margin-top: 5px"
         >
            <div class="search_container_item">
               <div style="display: flex; flex: 3; margin-right: 20px">
                  <span style="flex: 1">专业</span>

                  <el-select
                     v-model="exportFileConditions.major"
                     placeholder="要查询的专业"
                     style="flex: 3; height: 28px"
                  >
                     <el-option
                        v-for="major in majorList"
                        :key="major"
                        :label="major"
                        :value="major"
                     ></el-option>
                  </el-select>
               </div>

               <div style="display: flex; flex: 3">
                  <span style="flex: 1">班级</span>
                  <el-input
                     v-model="exportFileConditions.classN"
                     style="flex: 3"
                     class="search_input"
                     placeholder="要查询学生的班级"
                  />
               </div>

               <div style="display: flex; flex: 3">
                  <span style="flex: 1">省份</span>
                  <el-input
                     v-model="exportFileConditions.province"
                     style="flex: 3"
                     class="search_input"
                     placeholder="要查询学生的省份"
                  />
               </div>

               <div style="display: flex; flex: 3">
                  <span style="flex: 1">年级</span>
                  <el-input
                     v-model="exportFileConditions.enrollYear"
                     style="flex: 3"
                     class="search_input"
                     placeholder="填写纯数字，例：2020"
                  />
               </div>
            </div>
            <span
               style="
                  color: #e3ba58;
                  font-size: 12px;
                  float: right;
                  padding-top: 14px;
               "
               >请选择要导出的条件，如果不选择，则导出所有学生</span
            >
         </div>

         <el-divider style="margin: 13px 0"></el-divider>

         <span style="font-size: 19px; font-weight: 600; display: block"
            >导出字段选择</span
         >
         <div style="padding-left: 70px">
            <el-checkbox
               v-for="field of exportFieldList"
               :key="field.field"
               v-model="field.click"
               style="margin-top: 10px; width: 210px; margin-right: 0"
               >{{ field.label }}
            </el-checkbox>
         </div>

         <template #footer>
            <span class="dialog-footer">
               <el-button @click="exportFileDialogShow = false"
                  >取 消</el-button
               >
               <el-button
                  type="primary"
                  :disabled="isLoading"
                  @click="exportFileFunction()"
                  >导 出</el-button
               >
            </span>
         </template>
      </el-dialog>
   </div>
</template>

<script>
import $axios from "@/axios";
import { useStore } from "vuex";
import router from "@/rooter";
import { onMounted, reactive, ref, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
   name: "学生数据信息",
   setup() {
      const store = useStore();

      let isLoading = computed(() => {
         return store.state.isLoading;
      });

      // 当前页当前用户权限
      let currentPagePermissionStatusByCurrentUser = reactive({
         pageShow: false,
         operateStudentList: false,
         addStudent: false,
         exportStudentFile: false,
      });

      // ====================================  条件搜索
      // 搜索条件
      let searchCondition = reactive({
         name: "",
         stuId: "",
         major: "",
         classN: "",
         province: "",
         enrollYear: "", // 入学年级
         currentPage: "",
         pageSize: "",
      });

      // 重置搜索框
      function resetSearch() {
         for (let item in searchCondition) {
            searchCondition[item] = "";
         }
      }

      // 学生分页信息
      let studentPageInfo = reactive({
         studentList: [],
         currentPage: 1,
         pageSize: 10,
         totalItemsNum: 0,
      });

      // 获取学生列表分页信息
      function getStudentListPage(page) {
         studentPageInfo.currentPage = page;

         // 判断是否需要根据条件搜索
         let flag = false;
         for (let item in searchCondition) {
            if (searchCondition[item] !== "") {
               flag = true;
            }
         }

         // 需要条件搜索
         if (flag) {
            searchCondition.currentPage = studentPageInfo.currentPage;
            searchCondition.pageSize = studentPageInfo.pageSize;

            $axios
               .post("/student/listStudentsByConditions", searchCondition)
               .then((resp) => {
                  // 给item添加序号
                  for (let i = 0; i < resp.data.data.records.length; i++) {
                     resp.data.data.records[i].num =
                        (resp.data.data.current - 1) * resp.data.data.size +
                        i +
                        1;
                  }

                  // 赋值
                  studentPageInfo.studentList = resp.data.data.records;
                  studentPageInfo.currentPage = resp.data.data.current;
                  studentPageInfo.pageSize = resp.data.data.size;
                  studentPageInfo.totalItemsNum = resp.data.data.total;
               });
         } else {
            $axios
               .get(
                  "/student/listStudents/" +
                     studentPageInfo.currentPage +
                     "/" +
                     studentPageInfo.pageSize
               )
               .then((resp) => {
                  // 给item添加序号
                  for (let i = 0; i < resp.data.data.records.length; i++) {
                     resp.data.data.records[i].num =
                        (resp.data.data.current - 1) * resp.data.data.size +
                        i +
                        1;
                  }

                  // 赋值
                  studentPageInfo.studentList = resp.data.data.records;
                  studentPageInfo.currentPage = resp.data.data.current;
                  studentPageInfo.pageSize = resp.data.data.size;
                  studentPageInfo.totalItemsNum = resp.data.data.total;
               });
         }
      }

      // 页面选择一页的条数
      function pageSizeChange(newSize) {
         studentPageInfo.pageSize = newSize;
         // 回到第一页
         getStudentListPage(1);
      }

      // ====================================  下拉字段
      let majorList = ref([
         "软件工程",
         "网络工程",
         "大数据与数据科学",
         "计算机科学与技术",
      ]);

      // ====================================  新增学生

      // 新增学生表单
      let createStudentForm = reactive({
         name: "",
         stuId: "",
         classN: "",
         totalPoints: "",
         originArea: "",
         major: "",
         sex: "",
         grade: "",
         telephone: "",
         college: "",
         batch: "",
         middleSchool: "",
         firstChoice: "",
         secondChoice: "",
         thirdChoice: "",
         fourthChoice: "",
         fifthChoice: "",
      });

      // 控制新增学生dialog显示
      let createStudentDialogShow = ref(false);

      // 新增学生的表单限制规则
      const createStudentRules = {
         name: [
            { required: true, message: "请输入学生姓名", trigger: "blur" },
            {
               min: 1,
               max: 10,
               message: "长度在 1 到 10 个字符",
               trigger: "blur",
            },
         ],

         stuId: [
            { required: true, message: "请输入学生学号", trigger: "blur" },
         ],

         classN: [
            { required: true, message: "请输入学生班级", trigger: "blur" },
         ],

         totalPoints: [
            { required: true, message: "请输入学生总分", trigger: "blur" },
         ],

         originArea: [
            { required: true, message: "请输入学生生源地", trigger: "blur" },
         ],

         major: [
            { required: true, message: "请输入学生录取专业", trigger: "blur" },
         ],

         sex: [
            { required: true, message: "请输入学生性别", trigger: "blur" },
            {
               min: 1,
               max: 1,
               message: "需1个字符（男/女）",
               trigger: "blur",
            },
         ],

         grade: [
            { required: true, message: "请输入学生年级", trigger: "blur" },
         ],

         college: [
            { required: true, message: "请输入学生所在学院", trigger: "blur" },
         ],
      };

      // 新增角色表单dom
      const createStudentFormDom = ref(null);

      // ==================================== 学生附加信息

      // 新增学生附加信息表单
      let createStudentMoreInfoForm = reactive({
         // 出生日期
         birthday: "",
         // 民族
         ethnic: "",
         // 政治面貌
         political: "",
         // 身份证件号
         idNumber: "",
         // 身份证类型
         idType: "",
         // 出生地
         birthplace: "",
         // 籍贯
         nativePlace: "",
         country: "",
         // 入学年月
         enrollmentDate: "",
         // 培养方式
         trainingMode: "",
         // 学制
         academicYear: "",
         // 外语语种
         foreignLang: "",
         chineseScore: "",
         mathScore: "",
         foreignScore: "",
         // 综合成绩
         comprehensiveScore: "",
      });

      // 控制新增学生dialog显示
      let createStudentMoreInfoDialogShow = ref(false);

      // 新增学生请求
      function createStudent() {
         createStudentFormDom.value.validate((valid) => {
            if (valid) {
               if (createStudentForm.sex === "男") {
                  createStudentForm.sex = 1;
               } else {
                  createStudentForm.sex = 0;
               }

               for (let item in createStudentMoreInfoForm) {
                  createStudentForm[item] = createStudentMoreInfoForm[item];
               }

               $axios
                  .post("/student/saveStudent", createStudentForm)
                  .then(() => {
                     $axios
                        .get(
                           "/college/updateCollegeData/" +
                              createStudentForm.college +
                              "/" +
                              createStudentForm.grade
                        )
                        .then((resp) => {
                           ElMessage({
                              type: "success",
                              message: "学生添加成功",
                              duration: 1000,
                           });

                           setTimeout(() => {
                              window.location.reload();
                           }, 1000);
                        });
                  });
            } else {
               ElMessage({
                  type: "error",
                  message: "请添加必填项",
                  duration: 2000,
               });
            }
         });
      }

      // 重置学生更多信息表单
      function resetStudentMoreInfoForm() {
         for (let item in createStudentMoreInfoForm) {
            createStudentMoreInfoForm[item] = "";
         }
      }

      // ====================================  学生详情

      let currentDetailStudent = reactive({
         name: "",
         stuId: "",
         classN: "",
         totalPoints: "",
         originArea: "",
         major: "",
         sex: "",
         college: "",
         grade: "",
         telephone: "",
         batch: "",
         middleSchool: "",
         firstChoice: "",
         secondChoice: "",
         thirdChoice: "",
         fourthChoice: "",
         fifthChoice: "",
      });

      let detailStudentDialogShow = ref(false);

      function showStudentDetail(row) {
         detailStudentDialogShow.value = true;

         for (let item in currentDetailStudent) {
            currentDetailStudent[item] = row[item];
         }

         $axios.get("/studentMoreInfo/" + row.moreInfo).then((resp) => {
            for (let item in resp.data.data) {
               currentDetailStudent[item] = resp.data.data[item];
            }
         });
      }

      // ====================================  编辑学生

      // 修改用户表单dom
      const editStudentFormDom = ref(null);

      let isEditStudent = ref(false);

      // 控制编辑学生dialog显示
      let editStudentDialogShow = ref(false);

      // 控制编辑学生dialog显示
      let editStudentMoreInfoDialogShow = ref(false);

      // 编辑学生表单
      let editStudentForm = reactive({
         name: "",
         stuId: "",
         classN: "",
         totalPoints: "",
         originArea: "",
         major: "",
         sex: "",
         grade: "",
         telephone: "",
         batch: "",
         middleSchool: "",
         firstChoice: "",
         secondChoice: "",
         thirdChoice: "",
         fourthChoice: "",
         fifthChoice: "",
         college: "",
      });

      // 编辑学生附加信息表单
      let editStudentMoreInfoForm = reactive({
         // 出生日期
         birthday: "",
         // 民族
         ethnic: "",
         // 政治面貌
         political: "",
         // 身份证件号
         idNumber: "",
         // 身份证类型
         idType: "",
         // 出生地
         birthplace: "",
         // 籍贯
         nativePlace: "",
         country: "",
         // 入学年月
         enrollmentDate: "",
         // 培养方式
         trainingMode: "",
         // 学制
         academicYear: "",
         // 外语语种
         foreignLang: "",
         chineseScore: "",
         mathScore: "",
         foreignScore: "",
         // 综合成绩
         comprehensiveScore: "",
      });

      // 操作栏中编辑学生信息点击
      function editStudentInfoIcon(row) {
         editStudentDialogShow.value = true;

         for (let item in row) {
            if (item === "sex") {
               if (row[item].toString() === "1") {
                  editStudentForm[item] = "男";
               } else {
                  editStudentForm[item] = "女";
               }
               continue;
            }

            editStudentForm[item] = row[item];
         }

         $axios.get("/studentMoreInfo/" + row.moreInfo).then((resp) => {
            for (let item in resp.data.data) {
               if (item === "id") {
                  continue;
               }
               editStudentMoreInfoForm[item] = resp.data.data[item];
            }
         });
      }

      // 确认修改
      function confimEditStudent() {
         editStudentFormDom.value.validate((valid) => {
            if (valid) {
               if (editStudentForm.sex === "男") {
                  editStudentForm.sex = 1;
               } else {
                  editStudentForm.sex = 0;
               }

               for (let item in editStudentMoreInfoForm) {
                  editStudentForm[item] = editStudentMoreInfoForm[item];
               }

               $axios
                  .post("/student/updateStudent", editStudentForm)
                  .then(() => {
                     $axios
                        .get(
                           "/college/updateCollegeData/" +
                              editStudentForm.college +
                              "/" +
                              editStudentForm.grade
                        )
                        .then((resp) => {
                           ElMessage({
                              type: "success",
                              message: "学生信息修改成功",
                              duration: 1000,
                           });

                           setTimeout(() => {
                              window.location.reload();
                           }, 1000);
                        });
                  });
            } else {
               ElMessage({
                  type: "error",
                  message: "请正确编写学生信息",
                  duration: 2000,
               });
            }
         });
      }

      // ====================================  删除学生
      function deleteStudent(row) {
         ElMessageBox.confirm("确认删除学生" + row.name + "吗？", "Warning", {
            confirmButtonText: "删除",
            cancelButtonText: "取消",
            type: "warning",
            draggable: true,
         })
            .then(() => {
               $axios.post("/student/deleteStudent", row).then(() => {
                  $axios
                     .get(
                        "/college/updateCollegeData/" +
                           row.college +
                           "/" +
                           row.grade
                     )
                     .then((resp) => {
                        ElMessage({
                           type: "success",
                           message: "删除成功",
                           duration: 2000,
                        });

                        setTimeout(() => {
                           window.location.reload();
                        }, 800);
                     });
               });
            })
            .catch(() => {
               ElMessage({
                  type: "info",
                  message: "取消了操作",
               });
            });
      }

      // ====================================  上传文件

      let uploadFileDialogShow = ref(false);

      let uploadDOM = ref(null);

      let token = localStorage.getItem("token");

      const formData = new FormData();

      function httpRequest(params) {
         formData.append("file", params.file);
      }

      let loadErrorRow = ref([]);

      function handleSubmitUpload() {
         if (formData.get("file")) {
            // 发送上传文件请求
            $axios
               .post("/file/uploadFileToSaveStudents", formData, {
                  headers: {
                     "Content-Type": "multipart/form-data",
                  },
               })
               .then((resp) => {
                  loadErrorRow.value = resp.data.data;

                  formData.delete("file");
                  uploadDOM.value = null;

                  if (loadErrorRow.value.length < 1) {
                     ElMessage({
                        type: "success",
                        message: "数据导入成功",
                        duration: 2000,
                     });

                     setTimeout(() => {
                        window.location.reload();
                     }, 1000);
                  } else {
                     ElMessage({
                        type: "error",
                        message:
                           "数据导入部分失败，失败原因见表。成功导入的数据需刷新页面后查看",
                        duration: 4000,
                     });
                  }
               });
         }
      }

      // ====================================  下载文件
      function downloadFile() {
         $axios({
            url: "/file/downloadTemplateFile",
            method: "GET",
            responseType: "blob",
         }).then((response) => {
            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement("a");
            link.href = url;
            link.setAttribute("download", "template.xlsx");
            document.body.appendChild(link);
            link.click();
         });
      }

      // ====================================  导出文件

      let exportFileDialogShow = ref(false);

      let exportFileConditions = reactive({
         major: "",
         classN: "",
         province: "",
         grade: "",
      });

      let exportFieldList = ref([
         {
            label: "姓名",
            field: "name",
            click: true,
         },
         {
            label: "学号",
            field: "stuId",
            click: true,
         },
         {
            label: "班级",
            field: "classN",
            click: true,
         },
         {
            label: "总分",
            field: "totalPoints",
            click: true,
         },
         {
            label: "生源地",
            field: "originArea",
            click: true,
         },
         {
            label: "专业",
            field: "major",
            click: true,
         },
         {
            label: "性别",
            field: "sex",
            click: true,
         },
         {
            label: "年级",
            field: "grade",
            click: true,
         },
         {
            label: "学院",
            field: "college",
            click: true,
         },
         {
            label: "联系电话",
            field: "telephone",
            click: false,
         },
         {
            label: "批次",
            field: "batch",
            click: false,
         },
         {
            label: "所在中学",
            field: "middleSchool",
            click: false,
         },
         {
            label: "第一志愿",
            field: "firstChoice",
            click: false,
         },
         {
            label: "第二志愿",
            field: "secondChoice",
            click: false,
         },
         {
            label: "第三志愿",
            field: "thirdChoice",
            click: false,
         },
         {
            label: "第四志愿",
            field: "fourthChoice",
            click: false,
         },
         {
            label: "第五志愿",
            field: "fifthChoice",
            click: false,
         },
         {
            label: "出生日期",
            field: "birthday",
            click: false,
         },
         {
            label: "民族",
            field: "ethnic",
            click: false,
         },
         {
            label: "政治面貌",
            field: "political",
            click: false,
         },
         {
            label: "身份证件号",
            field: "idNumber",
            click: false,
         },
         {
            label: "身份证类型",
            field: "idType",
            click: false,
         },
         {
            label: "出生地",
            field: "birthplace",
            click: false,
         },
         {
            label: "籍贯",
            field: "nativePlace",
            click: false,
         },
         {
            label: "国家",
            field: "country",
            click: false,
         },
         {
            label: "入学年月",
            field: "enrollmentDate",
            click: false,
         },
         {
            label: "培养方式",
            field: "trainingMode",
            click: false,
         },
         {
            label: "学制",
            field: "academicYear",
            click: false,
         },
         {
            label: "外语语种",
            field: "foreignLang",
            click: false,
         },
         {
            label: "语文成绩",
            field: "chineseScore",
            click: false,
         },
         {
            label: "数学成绩",
            field: "mathScore",
            click: false,
         },
         {
            label: "外语成绩",
            field: "foreignScore",
            click: false,
         },
         {
            label: "综合成绩",
            field: "comprehensiveScore",
            click: false,
         },
      ]);

      let exportFileForm = reactive({
         conditions: "",
         fieldList: [],
      });

      // 文件下载请求
      function exportFileFunction() {
         exportFileForm.conditions = exportFileConditions;
         exportFileForm.fieldList = exportFieldList;

         $axios
            .post("/file/downloadStudentFile", exportFileForm, {
               responseType: "blob",
            })
            .then((response) => {
               const url = window.URL.createObjectURL(
                  new Blob([response.data])
               );
               const link = document.createElement("a");
               link.href = url;
               link.setAttribute("download", "students.xlsx");
               document.body.appendChild(link);
               link.click();

               ElMessage({
                  type: "success",
                  message: "导出成功，请等待下载完成",
                  duration: 2000,
               });
            })
            .catch(() => {
               ElMessage({
                  type: "error",
                  message: "文件导出错误，请稍后重试",
                  duration: 2000,
               });
            });
      }

      // 等待vuex中的userPermission准备好
      function waitForPermissions() {
         return new Promise((resolve) => {
            store.watch(
               () => store.state.currentLoginUser.permissions,
               (newValue) => {
                  // 权限：
                  if (newValue) {
                     newValue.forEach((permission) => {
                        if (
                           permission.permissionPath ===
                           "/studentDataManagement"
                        ) {
                           currentPagePermissionStatusByCurrentUser.pageShow = true;
                        }

                        if (
                           permission.permissionPath ===
                           "/studentDataManagement/operateStudent"
                        ) {
                           currentPagePermissionStatusByCurrentUser.operateStudentList = true;
                        }

                        if (
                           permission.permissionPath ===
                           "/studentDataManagement/addStudent"
                        ) {
                           currentPagePermissionStatusByCurrentUser.addStudent = true;
                        }

                        if (
                           permission.permissionPath ===
                           "/studentDataManagement/exportStudentFile"
                        ) {
                           currentPagePermissionStatusByCurrentUser.exportStudentFile = true;
                        }
                     });

                     // 将 Promise 状态改为已完成
                     resolve();
                  }
               },
               {
                  immediate: true, // 立即监听
               }
            );
         });
      }

      onMounted(async () => {
         await waitForPermissions();
         if (!currentPagePermissionStatusByCurrentUser.pageShow) {
            ElMessage({
               type: "error",
               message: "用户无权限",
               duration: 1500,
            });
            router.go(-1);
            return;
         }

         getStudentListPage(1);
      });

      return {
         studentPageInfo,
         createStudentDialogShow,
         pageSizeChange,
         getStudentListPage,
         createStudentForm,
         createStudentRules,
         createStudentFormDom,
         createStudent,
         detailStudentDialogShow,
         showStudentDetail,
         currentDetailStudent,
         createStudentMoreInfoDialogShow,
         createStudentMoreInfoForm,
         resetStudentMoreInfoForm,
         isEditStudent,
         editStudentForm,
         editStudentMoreInfoForm,
         editStudentDialogShow,
         editStudentMoreInfoDialogShow,
         editStudentFormDom,
         editStudentInfoIcon,
         confimEditStudent,
         deleteStudent,
         searchCondition,
         resetSearch,
         uploadFileDialogShow,
         handleSubmitUpload,
         uploadDOM,
         token,
         httpRequest,
         loadErrorRow,
         isLoading,
         downloadFile,
         majorList,
         exportFileDialogShow,
         exportFieldList,
         exportFileForm,
         exportFileFunction,
         exportFileConditions,
         currentPagePermissionStatusByCurrentUser,
      };
   },
};
</script>

<style scoped>
.search_container {
   padding: 18px;
   background-color: #fff;
   border-radius: 10px;
   margin: 20px 0;
   font-size: 14px;
}

.search_container_item {
   width: 100%;
   display: flex;
}

.search_container_item span {
   flex: 1;
   margin-top: 5px;
   margin-right: 5px;
}

.search_container .search_input {
   flex: 3;
   height: 28px;
}

.search_container_button {
   display: flex;
   justify-content: flex-start;
   margin-left: 12px;
}

.upload-demo {
   border-radius: 6px;
   padding: 20px 0;
   text-align: center;
}
</style>